.<template>
  <div>
    <input 
    :class="{
      error:!isOk,
      success:isOk
    }"
    :type="inputType" 
    :placeholder="placeh" 
    @input="inputValue" 
    @blur="vantAlert"
    v-model="value"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOk: true,
      value:''
    };
  },
  props: ["placeh", "inputType",'official','regExp'],
  methods: {
    //input事件
    inputValue(event) {
      const data = event.target.value.trim();
      const isValue = new RegExp(this.regExp)
      const isOk2 = isValue.test(data);
      this.isOk = isOk2;
      //向父组件传递当前的input值
        this.$emit('tellValue',this.value)
    },
    vantAlert(e){
      if(!this.isOk){
        //错误的时候显示
          this.$toast(this.official)
      }
      
    }
  }
};
</script>

<style scoped>
input {
  height: 13.889vw;
  width: 100%;
  border: none;
  padding-bottom: 0.833vw;
  border-bottom: 1px solid #000;
  outline: none;
}
.error {
  border-bottom: 1px solid red;
}
.success {
  border-bottom: 1px solid #000;
}
</style>